<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>城市天气查询</title>
</head>
<body>
<h2>天气查询</h2>
<label for="city">选择城市：</label>
<input type="text" id="city" name="city" list="city-codes" placeholder="输入城市代码">
<datalist id="city-codes">
  <option value="101010100">北京</option>
  <option value="101020100">上海</option>
  <option value="101280101">广州</option>
  <option value="101280601">深圳</option>
  <option value="101210101">杭州</option>
  <option value="101200101">武汉</option>
  <option value="101230101">福州</option>
  <option value="101250101">长沙</option>
  <option value="101190101">南京</option>
  <option value="101270101">成都</option>
</datalist>
<button onclick="fetchWeather()">查询</button>

<div id="result"></div>

<script>
  function fetchWeather() {
    const city = document.getElementById("city").value;
    fetch(`/api/weather?location=${encodeURIComponent(city)}`)
      .then(res => res.json())
      .then(data => {
        const now = data.now;
        document.getElementById("result").innerHTML = `
          <p>更新时间：${data.updateTime}</p>
          <p>温度：${now.temp}℃</p>
          <p>体感温度：${now.feelsLike}℃</p>
          <p>天气：${now.text}</p>
          <p>湿度：${now.humidity}%</p>
          <p>风向：${now.windDir}</p>
        `;
      })
      .catch(err => {
        document.getElementById("result").innerText = "查询失败，请检查城市代码";
        console.error(err);
      });
  }
</script>
</body>
</html>
